import React, { useRef, useState } from 'react'
import { Row, Col, Form, Input, Button, Typography, Select, Upload } from "antd"
import { peportsTypeList, toast } from '../../utils/commom'
import { UploadOutlined } from '@ant-design/icons';
import { ajax } from '../../api';
import { baseURL } from '../../api/request';
import { observer } from 'mobx-react';
import myinfo from '../../mobx/info';

const { Title } = Typography

function ReportAdd({ history }: any) {
    const { userInfo } = myinfo
    const onFinish = async (value: any) => {
        value.userInfo=userInfo
        let { code, result }: any = await ajax.addweixiu(value)
        if (code = 200) {
            history.push("/main/reports/Reportlist")
        }
    }

    // 失败提示
    const onFinishFailed = () => {
        toast.error("请输入有效的维修报修信息")
    }
    const [imgSrc, setImgSrc] = useState<any>('')
    const [form] = Form.useForm()
    const pfile: any = useRef()

    const startUploadeFile = async () => {
        const file = pfile.current.files[0]
        console.log(file);

        const data = new FormData()
        data.append("file", file)
        let { code, result, path }: any = await ajax.uploadfile(data)
        if (code == 200) {
            setImgSrc(path)
            form.setFieldsValue({ desc: path })


        }



    }


    const weixiuClick = () => {
        pfile.current.click()
    }
    return (
        <div>
            <Title level={4}>添加维修报告</Title>

            <Row>
                <Col>
                    <Form
                        name="basic"
                        labelCol={{ span: 24 }}
                        wrapperCol={{ span: 24 }}
                        initialValues={{ password: "qwe123" }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                        form={form}
                    >
                        <Form.Item
                            label="维修标题"
                            name="title"
                            rules={[{ required: true, message: '请输入维修标题!' }]}
                        >
                            <Input placeholder="请输入维修标题" />
                        </Form.Item>

                        <Form.Item
                            label="维修内容"
                            name="content"
                            rules={[{ required: true, message: '请输入维修内容!' }]}
                        >
                            <Input.TextArea cols={10} rows={10} placeholder="请输入维修内容" />
                        </Form.Item>

                        <Form.Item
                            label="维修描述"
                            name="desc"
                            rules={[{ required: true, message: '请上传维修图片!' }]}
                        >

                            {/* 上传图片 */}
                            <input type="file" ref={pfile} style={{ display: "none" }} onChange={startUploadeFile} />
                            <Button onClick={weixiuClick} icon={<UploadOutlined />}>{imgSrc ? '替换' : '上传'}维修图片</Button>
                            {
                                imgSrc && <img src={imgSrc.replace(/public/, baseURL)} alt="" style={{ width: '100%', height: 180, borderRadius: '6px', margin: "10px 0" }} />

                            }
                        </Form.Item>


                        <Form.Item
                            label="维修类型"
                            name="type"
                            rules={[{ required: true, message: '请选择维修等级!' }]}
                        >
                            <Select placeholder="请选择维修等级">
                                {
                                    peportsTypeList.map((item, index) => (
                                        <Select.Option key={index} value={item.value}>
                                            {item.text}
                                        </Select.Option>
                                    ))
                                }
                            </Select>
                        </Form.Item>



                        <Form.Item>
                            <Row>
                                <Col span={24} >
                                    <Button type="primary" block htmlType="submit"  > 添加维修内容 </Button>
                                </Col>

                            </Row>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
        </div>
    )
}


export default observer(ReportAdd)
